<script setup>
import { reactive, ref } from "vue";
import planApplyProjectApi from "@/api/planApplyProjectApi";
import planApi from '@/api/planApi.js'
import { Message } from "@arco-design/web-vue";
import QrcodeVue from "qrcode.vue";

const searchForm = ref();
const groupSearchForm = ref();
const historyParams = history.state.params;
let groupSearchModel = ref({
  planId: historyParams.planId,
  gradeId: "",
  groupNo: "",
  queryType: "2"
})
let searchModel = ref({
  planId: historyParams.planId,
  studyCode: "",
  cardNo: "",
  idNumber: "",
  queryType: "1"
});

const countData = ref({});
const singleRecordData = ref({
  name: "",
  schoolName: "",
  groupNo: "",
  groupInNo: "",
  gradeName: "",
  classesName: "",
  sex: "",
  idNumber: "",
  studyCode: ''
});

const dynamicColumns = [
  {
    title: "学校名称",
    dataIndex: "schoolName",
    width: 150,
  },
  {
    title: "学生姓名",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "性别",
    slotName: "sex",
    width: 100,
  },
  {
    title: "年级",
    dataIndex: "gradeName",
    width: 100,
  },
  {
    title: "班级",
    dataIndex: "classesName",
    width: 100,
  },
  {
    title: "学籍号",
    dataIndex: "studyCode",
    width: 200,
  },
  {
    title: "检录状态",
    slotName: "recorded",
    width: 200,
  },
  {
    title: "操作",
    slotName: "action",
    fixed: "right",
    width: 100,
  },
]

const groupColumns = [
  {
    title: "学校名称",
    dataIndex: "schoolName",
    width: 150,
  },
  {
    title: "学生姓名",
    dataIndex: "name",
    width: 100,
  },
  {
    title: "性别",
    slotName: "sex",
    width: 100,
  },

  {
    title: "年级",
    dataIndex: "gradeName",
    width: 100,
  },
  {
    title: "班级",
    dataIndex: "classesName",
    width: 100,
  },
  {
    title: "学籍号",
    dataIndex: "studyCode",
    width: 200,
  },
  {
    title: "检录状态",
    slotName: "recorded",
    width: 200,
  },

  {
    title: "报名项目",
    dataIndex: "projectNames",
    width: 300,
    fixed: "right",
  },
  {
    title: "操作",
    slotName: "action",
    fixed: "right",
    width: 200,
  },
];

const groupRecordData = ref([]);
const currentTab = ref(1);
const groupChecking = ref(false);
const autoCheckIn = ref(true);
const groupAutoCheckIn = ref(false);
const queryClear = ref(true);
const columns = ref([]);
const projectStatusList = ref([]);
const schoolList = ref([]);
const dynamicRecords = ref([]);

const queryCheckInCount = () => {
  planApplyProjectApi.queryCheckInCount({
    planId: historyParams.planId
  }).then(res => {
    countData.value = res;
  })
}


const checkIn = () => {
  columns.value = [];
  searchModel.value.autoCheckIn = autoCheckIn.value;
  planApplyProjectApi.checkIn(searchModel.value).then(res => {
    singleRecordData.value = res[0];
    singleRecordData.value.projectNameList.forEach(item => {
      columns.value.push({
        title: item,
        align: 'center',
        dataIndex: item
      });
    });
    projectStatusList.value = singleRecordData.value.projectStatusList;
    queryCheckInCount();
    if (autoCheckIn.value) {
      Message.success("检录成功");
    }
    if (currentTab.value == 1 && queryClear.value) {
      searchModel.value = {
        studyCode: "",
        cardNo: "",
        idNumber: "",
        queryType: "1",
        planId: historyParams.planId
      }
    }
    if (currentTab.value == 3) {
      dynamicRecords.value.push(res[0]);
      searchModel.value = {
        studyCode: "",
        cardNo: "",
        idNumber: "",
        queryType: "1",
        planId: historyParams.planId
      }
    }
  })
}

const cancelCheckGroup = () => {
  planApplyProjectApi.cancelCheckGroup(groupSearchModel.value).then(res => {
    Message.success("全部取消检录成功");
    groupRecordData.value = res;
    queryCheckInCount();
  });
}

const cancelCheckById = (record) => {
  planApplyProjectApi.cancelCheck({
    studyCode: record.studyCode,
    planId: historyParams.planId
  }).then(res => {
    Message.success("取消检录成功");
    queryCheckInGroup();
    queryCheckInCount();
  });
}

const checkInById = (record) => {
  planApplyProjectApi.checkIn({
    studyCode: record.studyCode,
    planId: historyParams.planId,
    autoCheckIn: true
  }).then(res => {
    Message.success("检录成功");
    queryCheckInGroup();
    queryCheckInCount();
  });
}

const queryCheckInGroup = () => {
  groupSearchModel.value.autoCheckIn = groupAutoCheckIn.value;
  planApplyProjectApi.queryCheckInGroup(groupSearchModel.value).then(res => {
    groupRecordData.value = res;
  })
}

const checkInGroup = () => {
  groupChecking.value = true;
  groupSearchModel.value.autoCheckIn = groupAutoCheckIn.value;
  planApplyProjectApi.checkInGroup(groupSearchModel.value).then(res => {
    groupRecordData.value = res;
    queryCheckInCount();
    groupChecking.value = false;
    Message.success("集体检录成功");
  })
}

const cancelCheck = () => {
  planApplyProjectApi.cancelCheck(searchModel.value).then(res => {
    Message.success("已取消检录");
    singleRecordData.value = {
      name: "",
      schoolName: "",
      groupNo: "",
      groupInNo: "",
      gradeName: "",
      classesName: "",
      sex: "",
      idNumber: "",
      studyCode: ''
    };
    columns.value = [];
    projectStatusList.value = [];
    queryCheckInCount();
  })
}

const changeTab = (key) => {
  if (key == 1 || key == 3) {
    singleRecordData.value = {};
    columns.value = [];
    projectStatusList.value = [];
    searchModel.value = {
      planId: historyParams.planId
    };
  }
  currentTab.value = key;
}

const deleteDyncmic = (record) => {
  let index = dynamicRecords.value.findIndex(item => item.studyCode == record.studyCode);
  dynamicRecords.value.splice(index, 1);
}

const getSchoolList = () => {
  planApi
    .getSchoolList({
      planId: historyParams.planId,
    })
    .then((res) => {
      schoolList.value = res;
    });
};

const refresh = () => {

}

const reset = () => {
  searchForm.value.resetFields();
};

const resetGroup = () => {
  groupSearchForm.value.resetFields();
}

queryCheckInCount();
getSchoolList();
</script>
<template>
  <div class="main-con">
    <div style="padding-bottom: 16px">
      <a-breadcrumb>
        <a-breadcrumb-item>首页</a-breadcrumb-item>
        <a-breadcrumb-item>考试计划</a-breadcrumb-item>
        <a-breadcrumb-item>信息检录</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-tabs @change="changeTab">
      <a-tab-pane key="1">
        <template #title>
          <icon-user />个人检录
        </template>
        <a-card>
          <a-row>
            <a-col :flex="1">
              <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 6 }"
                :wrapper-col-props="{ span: 18 }" label-align="left">
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item field="studyCode" label="学籍号">
                      <a-input v-model="searchModel.studyCode" @press-enter="checkIn" placeholder="请输入学籍号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="idNumber" label="身份证号">
                      <a-input v-model="searchModel.idNumber" @press-enter="checkIn" placeholder="请输入身份证号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="cardNo" label="IC卡号">
                      <a-input v-model="searchModel.cardNo" @press-enter="checkIn" placeholder="请输入IC卡号" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
            <a-divider style="height: 84px" direction="vertical" />
            <a-col :flex="'86px'" style="text-align: right">
              <a-space direction="vertical" :size="18">
                <a-button type="primary" @click="checkIn">
                  <template #icon>
                    <icon-search />
                  </template>
                  查询
                </a-button>
                <a-button @click="reset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  重置
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-card>
        <a-card style="margin-top: 20px;">
          <div class="flex flex-v-center">
            <a-space>
              <a-statistic title="检录总人数" :value="countData.totalCount"
                :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
              <a-divider direction="vertical" />
              <a-statistic title="已检录人数" :value="countData.recordedCount"
                :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
              <a-divider direction="vertical" />
              <a-statistic title="今日已检录人数" :value="countData.todayRecordCount"
                :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
              <a-divider direction="vertical" />
              <a-statistic title="未检录人数" :value="countData.unRecordCount"
                :value-style="{ color: '#0fbf60', fontSize: '16px' }" />
            </a-space>
            <a-space style="margin-left: 50px;">
              <a-button type="primary" @click="checkIn">开始检录</a-button>
              <a-button @click="cancelCheck">取消检录</a-button>
              <a-checkbox v-model="autoCheckIn">自动检录</a-checkbox>
              <a-checkbox v-model="queryClear">查询后清空输入项</a-checkbox>
            </a-space>
          </div>
          <a-card title="学生信息" style="margin-top: 20px;">
            <div class="flex" style="padding: 10px 0;">
              <a-space size="large">
                <a-avatar :size="100">
                  <img v-if="singleRecordData.avatarUrl" alt="avatar" :src="singleRecordData.avatarUrl" />
                  <img v-else src="@/assets/girl-pic@2x-d25a2ddb.png" />
                </a-avatar>
                <qrcode-vue v-if="singleRecordData.studyCode" :value="singleRecordData.studyCode" :size="100"
                  level="H" />
              </a-space>
              <div style="margin-left: 80px;">
                <a-descriptions :column="{ xs: 2, md: 2, lg: 2 }">
                  <a-descriptions-item label="学生姓名：">
                    <span class="show-info">{{ singleRecordData.name }} <a-tag v-if="singleRecordData.name"
                        type="primary" color="blue">{{
      singleRecordData.recorded ? '已检录' : '未检录' }}</a-tag></span>
                  </a-descriptions-item>
                  <a-descriptions-item label="分组号：">
                    <span v-if="singleRecordData.groupNo">{{ singleRecordData.groupNo }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="学生性别：">
                    <icon-man v-if="singleRecordData.sex == '1'" /><icon-woman
                      v-if="singleRecordData.sex == '2'" /><span v-if="singleRecordData.sex">{{ singleRecordData.sex ==
      '1' ? '男' : '女' }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="组内编号：">
                    <span v-if="singleRecordData.groupInNo">{{ singleRecordData.groupInNo }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="学校名称：">
                    <span v-if="singleRecordData.schoolName">{{ singleRecordData.schoolName }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="学籍号：">
                    <span v-if="singleRecordData.studyCode">{{ singleRecordData.studyCode }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="年级班级：">
                    <span v-if="singleRecordData.gradeName">{{ singleRecordData.gradeName + " / " +
      singleRecordData.classesName }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="身份证号：">
                    <span v-if="singleRecordData.idNumber">{{ singleRecordData.idNumber }}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </a-card>
          <a-card :title="'考试项目（' + columns.length + '项）'" style="margin-top: 20px;">
            <a-table :columns="columns" :data="projectStatusList" :pagination="false">

            </a-table>
          </a-card>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #title>
          <icon-user-group />集体检录
        </template>
        <a-card>
          <a-row>
            <a-col :flex="1">
              <a-form ref="groupSearchForm" :model="groupSearchModel" :label-col-props="{ span: 6 }"
                :wrapper-col-props="{ span: 18 }" label-align="left">
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item field="schoolId" label="学校">
                      <a-select v-model="groupSearchModel.schoolId" placeholder="请选择学校" allow-clear>
                        <a-option v-for="school in schoolList" :value="school.id" :key="school.id"
                          :label="school.name"></a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="groupNo" label="分组号">
                      <a-input v-model="groupSearchModel.groupNo" @press-enter="queryCheckInGroup"
                        placeholder="请输入分组号"></a-input>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
            <a-divider style="height: 84px" direction="vertical" />
            <a-col :flex="'86px'" style="text-align: right">
              <a-space direction="vertical" :size="18">
                <a-button type="primary" @click="queryCheckInGroup">
                  <template #icon>
                    <icon-search />
                  </template>
                  查询
                </a-button>
                <a-button @click="resetGroup">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  重置
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-card>
        <a-card style="margin-top: 20px;">
          <div class="flex flex-v-center">
            <a-space>
              <a-statistic title="检录总人数" :value="countData.totalCount"
                :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
              <a-divider direction="vertical" />
              <a-statistic title="已检录人数" :value="countData.recordedCount"
                :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
              <a-divider direction="vertical" />
              <a-statistic title="今日已检录人数" :value="countData.todayRecordCount"
                :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
              <a-divider direction="vertical" />
              <a-statistic title="未检录人数" :value="countData.unRecordCount"
                :value-style="{ color: '#0fbf60', fontSize: '16px' }" />
            </a-space>
            <a-space style="margin-left: 50px;">
              <a-popconfirm content="确认下方数据要全部检录吗？" @ok="checkInGroup">
                <a-button type="primary" :loading="groupChecking"
                  :disabled="!groupSearchModel.schoolId && !groupSearchModel.groupNo">全部检录</a-button>
              </a-popconfirm>
              <a-popconfirm content="确认下方数据要全部取消检录吗？" @ok="cancelCheckGroup">
                <a-button
                  :disabled="!groupSearchModel.schoolId || !groupSearchModel.groupNo || groupRecordData.length == 0">全部取消检录</a-button>
              </a-popconfirm>
              <a-checkbox v-model="groupAutoCheckIn">自动检录</a-checkbox>
            </a-space>
          </div>
          <div style="height: 30px;"></div>
          <a-table :columns="groupColumns" :data="groupRecordData" :pagination="false" :loading="groupChecking">
            <template #sex="{ record }">
              {{ record.sex == "1" ? "男" : " 女" }}
            </template>
            <template #recorded="{ record }">
              <a-tag type="primary" :color="record.recorded ? 'blue' : 'orange'"> {{ record.recorded ? "已检录" : " 未检录"
                }}</a-tag>
            </template>
            <template #action="{ record }">
              <a-space>
                <a-popconfirm v-if="!record.recorded" content="确认要检录该数据吗？" @ok="checkInById(record)">
                  <a-button type="outline" size="mini">检录</a-button>
                </a-popconfirm>
                <a-popconfirm v-if="record.recorded" content="确认要取消检录该数据吗？" @ok="cancelCheckById(record)">
                  <a-button type="outline" size="mini">取消检录</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #title>
          <icon-scan /> 动态检录
        </template>
        <a-card>
          <a-row>
            <a-col :flex="1">
              <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 6 }"
                :wrapper-col-props="{ span: 18 }" label-align="left">
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-form-item field="studyCode" label="学籍号">
                      <a-input v-model="searchModel.studyCode" @press-enter="checkIn" placeholder="请输入学籍号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="idNumber" label="身份证号">
                      <a-input v-model="searchModel.idNumber" @press-enter="checkIn" placeholder="请输入身份证号" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="cardNo" label="IC卡号">
                      <a-input v-model="searchModel.cardNo" @press-enter="checkIn" placeholder="请输入IC卡号" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
            <a-divider style="height: 84px" direction="vertical" />
            <a-col :flex="'86px'" style="text-align: right">
              <a-space direction="vertical" :size="18">
                <a-button type="primary" @click="checkIn">
                  <template #icon>
                    <icon-search />
                  </template>
                  查询
                </a-button>
                <a-button @click="reset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  重置
                </a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-card>
        <a-row>
          <a-col :span="12">
            <a-card style="margin-top: 20px;">
              <div class="flex flex-v-center">
                <a-space>
                  <a-statistic title="检录总人数" :value="countData.totalCount"
                    :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
                  <a-divider direction="vertical" />
                  <a-statistic title="已检录人数" :value="countData.recordedCount"
                    :value-style="{ color: '#00AAFF', fontSize: '16px' }" />
                  <a-divider direction="vertical" />
                  <a-statistic title="未检录人数" :value="countData.unRecordCount"
                    :value-style="{ color: '#0fbf60', fontSize: '16px' }" />
                </a-space>
                <a-space style="margin-left: 50px;">
                  <a-button type="primary" @click="checkIn">开始检录</a-button>
                  <a-button @click="cancelCheck">取消检录</a-button>
                  <a-checkbox v-model="autoCheckIn">自动检录</a-checkbox>
                </a-space>
              </div>
              <a-card title="学生信息" style="margin-top: 20px;">
                <div class="flex" style="padding: 10px 0;">
                  <div class="flex1">
                    <a-descriptions :column="{ xs: 1, md: 1, lg: 1 }">
                      <a-descriptions-item label="学生姓名：">
                        <span v-if="singleRecordData.name">{{ singleRecordData.name }} <a-tag type="primary"
                            color="blue">{{
      singleRecordData.recorded ? '已检录' : '未检录' }}</a-tag></span>
                      </a-descriptions-item>
                      <a-descriptions-item label="学生性别：">
                        <icon-man v-if="singleRecordData.sex == '1'" /><icon-woman
                          v-if="singleRecordData.sex == '2'" /><span v-if="singleRecordData.sex">{{ singleRecordData.sex
      == '1' ? '男' : '女' }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="学校名称：">
                        <span v-if="singleRecordData.schoolName">{{ singleRecordData.schoolName }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="年级班级：">
                        <span v-if="singleRecordData.gradeName">{{ singleRecordData.gradeName + " / " +
      singleRecordData.classesName }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="学籍号：">
                        <span v-if="singleRecordData.studyCode">{{ singleRecordData.studyCode }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item label="身份证号：">
                        <span v-if="singleRecordData.idNumber">{{ singleRecordData.idNumber }}</span>
                      </a-descriptions-item>
                    </a-descriptions>
                  </div>
                  <div size="large" style="margin-left: 20px;" class="flex flex-column">
                    <a-avatar :size="80">
                      <img v-if="singleRecordData.avatarUrl" alt="avatar" :src="singleRecordData.avatarUrl" />
                      <img v-else src="@/assets/girl-pic@2x-d25a2ddb.png" />
                    </a-avatar>
                    <div style="height: 20px;"></div>
                    <qrcode-vue v-if="singleRecordData.studyCode" :value="singleRecordData.studyCode" :size="80"
                      level="H" />
                  </div>
                </div>
              </a-card>
              <a-card title="考试项目">
                <a-empty v-if="projectStatusList.length == 0" />
                <a-table v-else :columns="columns" :data="projectStatusList" :pagination="false"></a-table>
              </a-card>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card :title="'检录名单' + '（已有 ' + dynamicRecords.length + ' 人）'" style="margin-top: 20px;height: 556px;">
              <a-empty v-if="dynamicRecords.length == 0" />
              <a-table v-else :columns="dynamicColumns" :data="dynamicRecords" :pagination="false">
                <template #sex="{ record }">
                  {{ record.sex == "1" ? "男" : " 女" }}
                </template>
                <template #recorded="{ record }">
                  <a-tag type="primary" :color="record.recorded ? 'blue' : 'orange'"> {{ record.recorded ? "已检录" : "未检录"
                    }}</a-tag>
                </template>
                <template #action="{ record }">
                  <a-space>
                    <a-popconfirm content="确认要移除该数据吗？" @ok="deleteDyncmic(record)">
                      <a-button type="text" size="mini">移除</a-button>
                    </a-popconfirm>
                  </a-space>
                </template>
              </a-table>
            </a-card>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<style scoped>
.show-info {
  display: inline-block;
  width: 100px;
}
</style>